<template>

  <div class="count" :class="[`count-size-${size}`, `count-type-${type}`, inlineBlock ? 'inline-block-count' : '']">
    <span class="count-info" :id="id"></span><span class="count-unit" v-if="unit" :class="[ `count-unit-size-${unitSize}` ]">{{ unit }}</span>
  </div>

</template>


<script>
  import CountUp from 'countup'

  export default {
    name: 'count',
    props: {
      id: {
        type: String,
        required: true
      },
      size: {
        type: String,
        default: 'normal'
      },
      type: {
        type: String,
        default: 'default'
      },
      inlineBlock: {
        type: Boolean,
        default: false
      },
      startVal: {
        type: [Number, String],
        default: 0
      },
      endVal: {
        type: [Number, String],
        required: true
      },
      duration: {
        type: Number,
        default: 4
      },
      separator: {
        type: String,
        default: ','
      },
      unit: {
        type: String
      },
      unitSize: {
        type: String,
        default: 'mini'
      },
      decimals: {
        type: Number,
        default: 0
      }
    },
    watch: {
      endVal (val, oldval) {
        this.onReady()
      }
    },
    mounted () {
      this.onReady()
    },
    methods: {
      onReady () {
        const { id, startVal, endVal, duration, separator, decimals } = this
        const counter = new CountUp(id, startVal, endVal, decimals, duration, {
          useEasing: true,
          useGrouping: true,
          separator: separator,
          decimal: '.'
        })
        if (!counter.error) counter.start()
        else throw counter.error
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import './index.styl';
</style>
